<template>
	<div class="padding-container audio-wrap" v-loading.fullscreen.lock="fullscreenLoading">
		<div class="title-part">
			<span>语音服务</span>
		</div>
		<el-form class="tab-pan" size="small" label-position="right" label-width="100">
      <el-form-item :label="$root.lang.server.audio.key+'：'">
        <span>{{ form.apiKey | dataFormat }}</span>
      </el-form-item>
      <el-form-item :label="$root.lang.server.audio.secret+'：'">
        <span>{{ form.apiSecret | dataFormat }}</span>
      </el-form-item>
    </el-form>

    <p class="account-tip" v-if="showTip">{{ $root.lang.tips.bindPhone.useAudio }}<router-link :to="{name: 'User'}">{{ $root.lang.tips.bindPhone.page }}</router-link>{{ $root.lang.tips.bindPhone.action }}</p>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      :empty-text="$root.lang.server.noData"
      size="small"
      border
      style="width: 100%">
      <el-table-column
        width="80"
        align="center"
        :label="$root.lang.server.audio.table.orderIndex">
        <template slot-scope="scope">
          <span>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.server.audio.table.name">
        <template slot-scope="scope">
          <span>{{ scope.row.name | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.server.audio.table.limit">
        <template slot-scope="scope">
          <span>{{ scope.row.limit | dataFormat }}</span>
        </template>
      </el-table-column>
    </el-table>
	</div>
</template>

<script>
import '@/options/baseState';
export default {
	name: 'ServerAudio',
	data() {
		return {
      fullscreenLoading: false,
      listLoading: false,
      showTip: false,
      form: {},
      tableData: []
    }
	},
  methods: {
    getServer() {
      this.fullscreenLoading = true
      this.request({
        url: '/api/voice/account/detail',
        method: 'get',
        params: {}
      }).then(response => {
        this.fullscreenLoading = false
        this.form = response.result
        if(this.form.id) {
          this.tableData = [
            {
              name: '语音服务',
              limit: '不限'
            }
          ]
        } else {
          this.showTip = true
        }
      }).catch(error => {
        this.fullscreenLoading = false
        /*this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })*/
      })
    }
  },
  created() {
    this.getServer()
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .padding-container {
    text-align:left;
    .title-part {
      text-align: left;
      font-size:18px;
      padding-bottom:40px;
    }
  }
  .audio-wrap {
    .account-tip {
      margin: 0 0 10px 20px;
      font-weight: bold;
      a {
        color: #409EFF;
      }
    }
  }
</style>